<!doctype html>
<html><head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <style type='text/css'>
            html { font-family:Helvetica; color:#222; }
            h1 { color:steelblue; font-size:24px; margin-top:24px; }
            button { margin:0 3px 10px; font-size:12px; }
            .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
            </style>
</head><body>
    <script>
        window.onerror = function(err) {
            log('window.onerror: ' + err)
        }
    
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'http://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    
    //图片点击事件 必须写在setupWebViewJavascriptBridge的callback里
    function didTappedImage(index) {
        setupWebViewJavascriptBridge(function(bridge) {
                                     bridge.callHandler('tapImage', index,
                                                        function(response) {})
                                     })
    }
    
    /*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
    setupWebViewJavascriptBridge(function(bridge) {
                                 var uniqueId = 1
                                 function log(message, data) {
                                 var log = document.getElementById('log')
                                 var el = document.createElement('div')
                                 el.className = 'logLine'
                                 el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                                 if (log.children.length) { log.insertBefore(el, log.children[0]) }
                                 else { log.appendChild(el) }
                                 }
              
                                 /*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
                                 //data是oc传过来的参数
                                 bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                                                        responseCallback(data)
                                                        })
                                 
                                 bridge.registerHandler('replaceImage', function(data, responseCallback) {
                                                        if (data.match("replaceimage")) {
                                                            var index = data.indexOf(",")
                                                            var messageReplace = data.substring(0, index)

                                                            var messagePath = data.substring(index+1)

                                                            messageReplace = messageReplace.replace(/replaceimage/, "")
                                                        

                                                            element = document.getElementById(messageReplace)
                                                        
                                                            if (element.src.match("loading")) {
                                                                responseCallback(messagePath)
                                                                element.src = messagePath
                                                            }
                                                        }
                                                        })

                                 
                                 document.body.appendChild(document.createElement('br'))
                                 
                                 var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
                                 callbackButton.innerHTML = 'Fire testObjcCallback'
                                 callbackButton.onclick = function(e) {
                                 e.preventDefault()
                                 log('JS calling handler "testObjcCallback"')
                                 //js主动调用oc的方法 {'foo': 'bar'}是传给oc的参数data
                                 bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                                                    log('JS got response', response)
                                                    })
                                 }
                                 })
        </script>
    <p>mainnews</p>
</body></html>
